Es muy posible que hayas escuchado muchas veces la palabra HTML, ya que, ni más ni menos, es el lenguaje sobre el que se construye Internet. Toda página web o plataforma se basa, en su nivel más básico, en el lenguaje HTML. Sin embargo puede que no sepas que crear la estructura básica HTML es muy fácil.

Tener unos conocimientos básicos de HTML no es únicamente el primer paso para adentrarse en el mundo del desarrollo web, sino que es una manera fundamental para entender la sociedad digital en la que vivimos.

En este artículo te enseñamos a crear la estructura básica HTML de una forma muy sencilla. Es decir, te mostramos como crear una página web.

¡Empecemos!

Primeros pasos para crear la estructura básica HTML

En primer lugar, debes saber qué es lo que necesitas para crear una página web con la estructura básica HTML. Básicamente, te van a hacer falta dos cosas: un editor de texto (serviría el mismo bloc de notas, aunque tienes opciones más profesionales, como Visual Studio o Sublime Text) y un navegador web (como Google Chrome). Así de sencillo.

En segundo lugar, es conveniente tener unas nociones básicas sobre este lenguaje. Debes saber que HTML es un estándar que define la estructura y el contenido de una web, no determina ni su estilo ni su comportamiento. Esos aspectos se trabajan con otros lenguajes.

Por otro lado, debes saber que los archivos que contienen código HTML se guardan con extensión .html y se pueden abrir con el navegador web. Es decir, básicamente son páginas web. Lo que ocurre a grandes rasgos cuando accedes a cualquier página web de Internet, es que el servidor que almacena dicha página envía a tu dispositivo el archivo HTML correspondiente para que tu navegador lo interprete y muestre la página en pantalla.

Una vez que conoces estos aspectos, ya estás preparado para crear tu primera página web.

Primeros pasos para crear la estructura básica HTML

Etiquetas para crear la estructura básica HTML

Antes de nada, debes saber que el código HTML se compone de etiquetas. Las etiquetas HTML son palabras clave que se escriben entre los signos <> y que el navegador entiende.

Normalmente las etiquetas se componen de una etiqueta de apertura (entre los signos <>), una etiqueta de cierre (entre los signos </>) y un contenido. El contenido puede ser texto u otras etiquetas. Aunque existen algunas etiquetas que no tienen ni contenido ni etiqueta de cierre, son una excepción. La sintaxis sería la siguiente:

<etiqueta1>
     contenido etiqueta1
</etiqueta1>

<!DOCTYPE html>

Pues bien, la primera etiqueta que colocaremos en todo documento HTML es <!DOCTYPE html>. No tiene ni contenido ni etiqueta de cierre, simplemente indica al navegador que el documento es de tipo HTML5.

<html>

Justo después de esta irá la etiqueta <html>. Esta segunda etiqueta sí que tiene etiqueta de cierre (</html>) y englobará todo el contenido de la página.

<body> y <head>

Dentro de las etiquetas <html> y </html>, colocaremos las etiquetas <body> y <head> de la siguiente manera:

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
   </body>
</html>

Añadiendo estas etiquetas a tu editor de texto habrás creado la estructura HTML más elemental de una página web. Obviamente, existen muchas más etiquetas, en este artículo nos centramos únicamente en las principales. Si quieres conocer todas las etiquetas te recomendamos visitar nuestro listado de etiquetas HTML5.

El head y el body: protagonistas de la estructura básica HTML

Head y Body, elementos principales de la estructura básica HTML.

Las etiquetas <head> y <body> y son los principales bloques en los que se divide el documento HTML.

El head es la parte de nuestro documento donde incluimos información de utilidad para el navegador web. La mayor parte del código HTML incluido en el head no será directamente visible por el usuario, por lo que en esta entrada no lo explicaremos en profundidad. Sin embargo, cabe destacar su etiqueta <title>, que define el título de la página y lo hace visible en la barra de título del navegador.

El body es la parte que incluye todo el contenido visible de la web. Normalmente, su contenido se organiza a través de otras tres etiquetas: <header> (encabezado), <main> (contenido principal) y <footer> (pie de página).

Para añadir contenido visual al body, tenemos etiquetas como <h1> (título principal), <h2> (subtítulo) o <p> (párrafo). De esta manera podemos definir la estructura básica HTML de cualquier página de la siguiente manera:

<!DOCTYPE html>
<html>
   <head>
      <title>Título de mi página web</title>
   </head>
   <body>
      <header>
         <h1>Titular principal de la página</h1>
      </header>
      <main>
         <h2>Primer Subtítulo de la página</h2>
         <p>Primer párrafo</p>
      </main>
      <footer>
      </footer>
   </body>
</html>

Como ves, escribir la estructura básica HTML de una página web está al alcance de cualquiera. Este es solo el primer paso del camino del diseño web, si quieres seguir aprendiendo, puedes leer nuestros tutoriales en el blog o visitar el siguiente sitio web.

Conclusiones

Ya has visto cómo crear la estructura básica HTML de una web. Te animo a que utilices el código mostrado y pruebes a ir añadiendo nuevas etiquetas, para seguir construyendo y aprendiendo.

Espero que te haya servido de ayuda. Si quieres aportar algo, por favor, no dudes en dejarme un comentario en esta publicación.

¡Te espero en el siguiente artículo!